<template >
	<div class="login-content">
		<round v-for="index in count" :size="circleSize[index-1]" :left="circleLeft[index-1]" :top="circleTop[index-1]" :color="circleColor[index-1]" :key="index" />
		<div class="login-box">
			<div class="box-left">
				<img src = "../assets/logo.png" alt = "" >
				<p></p>
				<p class="p1">阿卡波糖工业化发酵生产及其车间设计</p>
				<p class="p2">3D virtual simulation training of industrial fermentation production of acarbose and its workshop design</p>
			</div>
			<div class="box-form">
				<p class="p3">用户登录</p>
				<div class="form">
					<el-form  :model="loginForm" :rules="rules" ref="loginForm">
						<el-form-item prop="loginName">
							<el-input v-model="loginForm.loginName"  prefix-icon="el-icon-user-solid" placeholder="请输入用户名称"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-lock" placeholder="请输入登录密码"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="btn">
					<el-button type="primary" style="width: 100%" @click="getInHome('loginForm')">登 录</el-button>
				</div>
			</div>
		</div>
	</div>
</template >

<script >
	import round from "../components/round";
	import { userLogin } from "../api/user";

    export default {
        name: "Login",
		components:{round},
		data(){
            return{
                count: 90, // 圆形数量
                circleSize: [], // 圆形直径
                circleLeft: [], // 圆形左边距
                circleTop: [], // 圆形上边距
                circleColor: [], // 圆形背景颜色
				loginForm:{
                    loginName:'',
                    password: ''
				},
                rules: {
                    loginName: [
                        {required: true, message: '请输入用户名称', trigger: 'blur'},
                    ],
                    password:[
                        {required: true, message: '请输入登录密码', trigger: 'blur'},
					]
                }
			}
		},
		mounted() {
            for (let i = 0; i < this.count; i++) {
                this.circleSize.push(Math.floor(Math.random() * 20) + 10);
                this.circleLeft.push(Math.floor(Math.random() * (window.innerWidth - this.circleSize[i])));
                this.circleTop.push(Math.floor(Math.random() * (window.innerHeight - this.circleSize[i])));
                this.circleColor.push(`rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`);
            }
            
                for (let i = 0; i < this.count; i++) {
                    this.circleSize[i] = Math.floor(Math.random() * 20) + 10;
                    this.circleLeft[i] = Math.floor(Math.random() * (window.innerWidth - this.circleSize[i]));
                    this.circleTop[i] = Math.floor(Math.random() * (window.innerHeight - this.circleSize[i]));
                    this.circleColor[i] = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
                }
         
        },
        methods:{
             getInHome(loginForm) {
                this.$refs[loginForm].validate((valid) => {
                    if (valid) {
                        userLogin(this.loginForm).then( res => {
                            if (res.data.code === 200) {
                                this.$notify.success(res.data.message)
                                window.sessionStorage.setItem('user', JSON.stringify(res.data.data.user))
                                window.sessionStorage.setItem('token', res.data.data.tokenInfo.tokenValue)
                                this.$router.replace('/home')
                            }
						})
                    }
                });
            },
		}
    }
</script >

<style scoped lang="less">
.login-content{
	width: 100%;
	height: 100%;
	background-color: #80bcb5;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	.login-box{
		z-index: 999;
		width: 40%;
		height: 50%;
		border-radius: 10px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
		.box-left{
			width: 50%;
			height: 100%;
			background-color: #eaf4ff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			img{
				margin-top: 10%;
				width: 150px;
				height: 150px;
			}
			p{
				text-align: center;
			}
			.p1{
				font-size: 18px;
				letter-spacing: 2px;
				font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
				font-weight:700;
				color:#666666;
			}
			.p2{
				font-size: 12px;
				font-family:'微软雅黑 Regular', '微软雅黑', sans-serif;
				font-weight:400;
				color:#999999;
			}
		}
		.box-form{
			width: 50%;
			height: 100%;
			background-color: #ffffff;
			box-sizing: border-box;
			.p3{
				font-size: 18px;
				font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
				font-weight:700;
				color:#666666;
				text-align: center;
				letter-spacing: 2px;
			}
			.form{
				margin: 20% 0;
				padding: 0 20px;
				box-sizing: border-box;
			}
			.btn{
				width: 100%;
				padding: 0 20px;
				box-sizing: border-box;
			}
		}
	}
}
</style >
